<template>
  <ContainerGroup>
    <Container height="fill" :scroll-y="true" display="flexY">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-form-item label="输入字段" prop="param">
          <el-input
            type="textarea"
            v-model="ruleForm.param"
            :rows="6"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="btn-box">
            <Button @click="submitForm('ruleForm')">生成</Button>
          </div>
        </el-form-item>
        <el-form-item label="结果" prop="result">
          <div class="content" v-html="ruleForm.result"></div>
        </el-form-item>
      </el-form>
    </Container>
  </ContainerGroup>
</template>
<script>
import { JudgmentCodeGenerator } from "@/utils/apis/dataExchange/index";
export default {
  name: "",
  data() {
    return {
      ruleForm: {
        param: "",
        result: "",
      },
      rules: {
        param: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  created() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let paramss = {
            param: this.ruleForm.param,
          };
          JudgmentCodeGenerator(paramss).then((res) => {
            if (res.data.code == 200) {
              this.ruleForm.result = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.demo-ruleForm {
  width: 50%;
  position: absolute;
  top: 5%;
}
.btn-box {
  display: flex;
  justify-content: center;
}
.content {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 60vh;
  padding: 5px 15px;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>